<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>浅阅书城</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <jsp:include page="common/common-css.jsp" />
</head>
<body>

<jsp:include page="common/common-mobileButton.jsp" />

<div class="main-wrapper">
    <!--页面导航栏组件-->
    <jsp:include page="common/common-header.jsp" />


    <!-- 首页轮播div -->
    <div class="slider-area">
        <!-- Main Slider -->
        <div class="swiper-container main-slider swiper-arrow with-bg_white swiper-container-fade swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
            <div class="swiper-wrapper" id="swiper-wrapper1" aria-live="off"
                 style="transition-duration: 0ms;">
                <!-- 轮播图详情 -->
                <c:forEach items="${scrollBook}" var="scroll" varStatus="slide">
                    <div class="swiper-slide animation-style-01 swiper-slide-active" data-swiper-slide-index="0"
                         style="width: 1519px; transition-duration: 0ms; opacity: 1; transform: translate3d(-1519px, 0px, 0px);"
                         role="group" aria-label="${slide.index} / ${fn:length(scrollBook)}">
                        <div class="slide-inner style-1 bg-height">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-6 order-2 order-lg-1 align-self-center">
                                        <div class="slide-content text-black">
                                            <span class="offer" style="color: #5cb85c!important;">今日精选推荐</span>
                                            <h3 class="title">${scroll.name}</h3>
                                            <p class="short-desc">${scroll.mark}</p>
                                            <div class="btn-wrap">
                                                <a class="btn btn-custom-size xl-size btn-pronia-primary"
                                                   href="javascript:;" onclick="buy(${scroll.id})">
                                                    加入购物车
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8 offset-md-2 offset-lg-0 order-1 order-lg-2">
                                        <div class="inner-img">
                                            <div class="scene fill"
                                                 style="transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; backface-visibility: hidden; position: relative; pointer-events: none;">
                                                <div class="expand-width" data-depth="0.2"
                                                     style="transform: translate3d(-6.3px, 12.1px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: relative; display: block; left: 0px; top: 0px;">
                                                    <img src="${scroll.cover}"
                                                         alt="Inner Image">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
            <div class="swiper-button-prev" tabindex="0" role="button" aria-label="上一张">
            </div>
            <div class="swiper-button-next" tabindex="0" role="button" aria-label="下一张"></div>
        </div>
    </div>

    <!--商品推荐 -->
    <div class="product-area section-space-top-100">
        <div class="container">
            <div class="section-title-wrap">
                <h2 class="section-title mb-0">推荐商品</h2>
            </div>
            <div class="row">

                <div class="col-lg-12">

                    <!-- 商品优先级 -->
                    <ul class="nav product-tab-nav tab-style-1" id="myTab" role="tablist">

                        <li class="nav-item" role="presentation">
                            <a class="active" id="bestseller-tab" data-bs-toggle="tab" href="/xha010469/#bestseller"
                               role="tab" aria-controls="bestseller" aria-selected="false"> 热销
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a id="latest-tab" data-bs-toggle="tab" href="/xha010469/#latest" role="tab"
                               aria-controls="latest" aria-selected="false">最新
                            </a>
                        </li>
                    </ul>


                    <div class="tab-content" id="myTabContent">
                        <!--  <div class="tab-pane fade show active" -->

                        <!-- 热销 -->
                        <div class="tab-pane fade show active" id="bestseller" role="tabpanel"
                             aria-labelledby="bestseller-tab">
                            <div class="product-item-wrap row">

                                <c:forEach items="${hotList}" var="book">
                                    <div class="col-xl-3 col-md-4 col-sm-6">
                                        <div class="product-item">

                                            <div class="product-img">
                                                <!-- 商品图片 -->
                                                <a href="/bookmall/detail/${book.id}">
                                                    <!-- 默认显示图片 -->
                                                    <img class="primary-img" src="${book.cover}"
                                                         alt="${book.name}">
                                                </a>

                                                <div class="product-add-action">
                                                    <ul>
                                                        <!-- 查看详情 -->
                                                        <li>
                                                            <a class="quuickview-btn" onclick="viewBook(${book.id})"
                                                               data-tippy="快速查看">
                                                                <i class="pe-7s-look"></i>
                                                            </a>
                                                        </li>
                                                        <!-- 加入购物车 -->
                                                        <li>
                                                            <a href="javascript:;" onclick="buy(${book.id})"
                                                               data-tippy="加入购物车">
                                                                <i class="pe-7s-cart"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="product-content">
                                                <!-- 商品名称 -->
                                                <a class="product-name"
                                                   href="/bookmall/detail/${book.id}">${book.name}</a>
                                                <!-- 价格 -->
                                                <div class="price-box pb-1">
                                                    <span class="new-price">¥ ${book.price}</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </c:forEach>
                            </div>
                        </div>


                        <!-- 新品  -->
                        <div class="tab-pane fade" id="latest" role="tabpanel" aria-labelledby="latest-tab">
                            <div class="product-item-wrap row">

                                <c:forEach items="${newList}" var="book">
                                    <div class="col-xl-3 col-md-4 col-sm-6">
                                        <div class="product-item">
                                            <div class="product-img">
                                                <!-- 商品图片 -->
                                                <a href="/bookmall/detail/${book.id}">
                                                    <!-- 默认显示图片 -->
                                                    <img class="primary-img" src="${book.cover}" alt="${book.name}">
                                                </a>

                                                <div class="product-add-action">
                                                    <ul>
                                                        <!-- 查看详情-->
                                                        <li>
                                                            <a class="quuickview-btn" onclick="viewBook(${book.id})"
                                                               data-tippy="快速查看">
                                                                <i class="pe-7s-look"></i>
                                                            </a>
                                                        </li>
                                                        <!-- 加入购物车 -->
                                                        <li>
                                                            <a href="javascript:;" onclick="buy(${book.id})"
                                                               data-tippy="加入购物车">
                                                                <i class="pe-7s-cart"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="product-content">
                                                <!-- 商品名称 -->
                                                <a class="product-name" href="#details">书名</a>
                                                <!-- 价格 -->
                                                <div class="price-box pb-1">
                                                    <span class="new-price">$67.45</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--页尾-->
    <jsp:include page="footer.jsp" />
</div>

<!--js文件-->
<jsp:include page="common/common-js.jsp" />

<script>
$(function () {
        if (sessionStorage.getItem("isReload")) {
            console.log("页面刷新");
        } else {
            layer.alert('支付使用的是支付宝的沙箱完成支付流程', {
                skin: 'layui-layer-molv',
                offset: "auto",
                btn: ['知道了'],
                anim: 4,//动画类型
                yes:function(){
                    sessionStorage.setItem("isReload", true);
                    location.replace("/bookmall/index")
                }
            });
        }
    });
</script>
</body>
</html>
